import React, { memo} from 'react'
import { LetterListWrapper ,LetterItemWrapper} from './style'
import { handleLetterList } from '@/utils/handle'
import { getCurrentInitialAction} from '../../store/actionCreators'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
export default memo(function LetterList() {
  const dispatch = useDispatch()
  const { currentInitial } = useSelector(state => ({
    currentInitial:state.getIn(['artist','currentInitial'])
  }), shallowEqual)
  const chooseLetter = (initial) => {
    dispatch(getCurrentInitialAction(initial))
  }
  const letterList = handleLetterList()
  return (
    <LetterListWrapper>
      {
        letterList.map(item => {
          return (
            <LetterItemWrapper key={item.initial} isActive={currentInitial === item.initial} onClick={e => chooseLetter(item.initial)}>
              {item.name}
            </LetterItemWrapper>
          )
        })
      }
    </LetterListWrapper>
  )
})
